<template>
  <a-radio-group
    :disabled="!(attrs.viewMode === BaseDataUtils.viewMode.CREATE)"
    class="chiose-content"
    v-model="attrs.modelForm.type"
    @change="(value, ev) => handleChange(value)"
  >
    <a-radio value="text">
      <template #radio="{ checked }">
        <div class="text content-item" :class="{ active: checked }">
          <div class="icon-box">
            <i class="iconfont icon-wenbenkuang"></i>
          </div>
          <div class="text-box">文本框</div>
        </div>
      </template>
    </a-radio>
    <a-radio value="select">
      <template #radio="{ checked }">
        <div class="select content-item" :class="{ active: checked }">
          <div class="icon-box">
            <i class="iconfont icon-xialakuang"></i>
          </div>
          <div class="text-box">下拉菜单</div>
        </div>
      </template>
    </a-radio>
    <a-radio value="radiobox">
      <template #radio="{ checked }">
        <div class="radio content-item" :class="{ active: checked }">
          <div class="icon-box">
            <i class="iconfont icon-danxuankuang1"></i>
          </div>
          <div class="text-box">单选框</div>
        </div>
      </template>
    </a-radio>
    <a-radio value="checkbox">
      <template #radio="{ checked }">
        <div class="checkbox content-item" :class="{ active: checked }">
          <div class="icon-box">
            <i class="iconfont icon-fuxuankuang"></i>
          </div>
          <div class="text-box">复选框</div>
        </div>
      </template>
    </a-radio>
    <a-radio value="child_select">
      <template #radio="{ checked }">
        <div class="child-select content-item" :class="{ active: checked }">
          <div class="icon-box">
            <i class="iconfont icon-erjixialakuang"></i>
          </div>
          <div class="text-box">二级下拉菜单</div>
        </div>
      </template>
    </a-radio>
  </a-radio-group>
</template>
<script lang="ts" setup name="CompType">
import { useAttrs } from 'vue';
import * as BaseDataUtils from '../utils/useBaseData';

const attrs = useAttrs() as {
  modelForm: any;
  viewMode: string;
};
const handleChange = (value: string | number | boolean) => {
  if (value !== "text") {
    if (value === "child_select") {
      attrs.modelForm.data = [
        {
          text: null,
          code: 1,
          child: [
            {
              text: null,
              code: 1,
            },
          ],
        },
      ];
    } else {
      attrs.modelForm.data = [
        {
          text: null,
          code: 1,
        },
      ];
    }
  }
};
</script>
<style lang="less" scoped>
@import url("../styles/compModal.less");
</style>
